﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Users.aspx.cs" Inherits="DotNet.WebUI.LayUI.Users" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Layui使用案例</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="layui/css/layui.css"  media="all" />
</head>
<body>
    <form id="form1" runat="server">
        <table class="layui-hide" id="Lay_User" lay-filter="User"></table> 
    </form>            
          
    <script src="layui/layui.js" charset="utf-8"></script>
 
    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#Lay_User'
                , url: 'DataUsers.ashx'
                , cellMinWidth: 100 //全局定义常规单元格的最小宽度
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['prev', 'page', 'next', 'limit', 'count', 'refresh', 'skip']//自定义分页布局
                    ,limits: [10, 20, 40, 60, 100, 200, 500]
                    ,limit: 20 //每页显示 20 条记录
                    ,curr: 3 //设定初始在第 3 页
                    ,groups: 10 //只显示 1 个连续页码
                    , first: false //不显示首页
                    //, last: false //显示尾页
                }
                , cols: [[
                    { checkbox: true, fixed: true }
                    ,{ field:'LoginID', width:110, title: '登录代码', sort: true}
                    , { field: 'UserName', width: 200, title: '用户名', sort: true}
                    , { field: 'Depict', title: '说明' }
                    , { fixed: 'right', width: 170, align: 'center', title: '操作', toolbar: '#barTool' }
                ]]
                , height: 'full-20' //其中 20 为距离底部的距离，20px.
            });

            //监听工具条
            table.on('tool(User)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('登录代码：' + data.LoginID + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.alert('编辑行：<br>' + JSON.stringify(data))
                }
            });
        });
    </script>
    <!-- 数据操作 -->
    <script type="text/html" id="barTool">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</body>
</html>